<template>
    <div>
        <div><i class="el-icon-star-on"></i>基础信息</div>
        <r-list :ColsNum="7" :width="120" :ListCols="ListCols" ListType="Info" :ListData="ListData"></r-list>
        <div class="mtb20 "><i class="el-icon-star-on"></i>商品信息</div>
        <r-table :tableData="tableData" :tableCols="tableCols" :bottomText="tableBottom" style="height:300px"></r-table>
        <div class="mt20"><i class="el-icon-star-on"></i>费用信息</div>
        <r-list :ColsNum="5" :ListCols="ListColsFeiyong" ListType="Info" :ListData="ListDataFeiyong"></r-list>
        <div class="mt20"><i class="el-icon-star-on"></i>收货信息</div>
        <r-list :ColsNum="3" :ListCols="ListColsShouhuo" ListType="Info" :ListData="ListDataShouhuo"></r-list>
        <div class="mt20"><i class="el-icon-star-on"></i>订单利润分成</div>
        <r-list :ColsNum="3" :ListCols="ListColsFencheng" ListType="Info" :ListData="ListDataFencheng"></r-list>
        <div v-if="ListDataShouhou" class="mt20"><i class="el-icon-star-on"></i>售后信息</div>
        <r-list v-if="ListDataShouhou" :ColsNum="3" :ListCols="ListColsShouhou" ListType="Info" :ListData="ListDataShouhou"></r-list>
        <div class="mt20 mb20"><i class="el-icon-star-on"></i>订单日志</div>
        <r-table :tableData="tableDataLog" :tableCols="tableColsLog" :height="400" @refresh="init()"></r-table>
        <!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" /> -->

    </div>
</template>
<script>
export default {
    data() {
        return {
            //基础信息
            ListCols: [
                [
                    {
                        label: '订单编号',
                        prop: 'orderNo',
                    },
                    {
                        label: '订单状态',
                        prop: 'state',
                        formatter: e => e.state == 0 ? '已创建'
                            : e.state == 1 ? '待接单'
                                : e.state == 2 ? '待配送'
                                    : e.state == 3 ? '已送达'
                                        : e.state == 4 ? '已完成'
                                            : e.state == 5 ? '已销毁'
                                                : e.state == 6 ? '已取消'
                                                    : e.state == 7 ? '申请售后'
                                                        : e.state == 8 ? '已退款'
                                                            : e.state == 9 ? '不退款'
                                                                : e.state == 10 ? '已超时'
                                                                    : e.state == 255 ? '售后订单'
                                                                        : '',

                    },
                    {
                        label: '下单用户',
                        prop: 'nickName',
                    },
                    {
                        label: '手机号码',
                        prop: 'phone',
                        // color: "#f00",
                        // formatter: e => e == 1 ? "已处理" : '未处理'
                    },
                    {
                        label: '支付方式',
                        prop: 'payType',
                        formatter: e => e.payType == 1 ? "未知" : e.payType == 2 ? '微信公众号支付' : e.payType == 3 ? '微信公众号免密支付' : e.payType == 4 ? '微信人脸识别支付' : e.payType == 5 ? 'IC卡支付' : e.payType == 6 ? '支付宝支付' : e.payType == 7 ? '支付宝免密支付' : ''
                    },
                    {
                        label: '支付金额',
                        prop: 'actuallyPaidMoney',
                        formatter: e => '￥' + e.actuallyPaidMoney
                    },
                    {
                        label: '支付时间',
                        prop: 'payTime',
                    },
                    {
                        label: '设备编号',
                        prop: 'equipmentNo',
                    },
                    {
                        label: '设备地址',
                        prop: 'address',
                    },
                    {
                        label: '所属代理商',
                        prop: 'agentName',
                    },
                    {
                        label: '所属商家',
                        prop: 'merchantName',
                    },
                    {
                        label: '配送员',
                        prop: 'distributorName',
                    },
                    {
                        label: '配送员电话',
                        prop: 'distributorPhone',
                    },
                ]
            ],
            ListData: {
            },
            //费用信息数据
            ListDataFeiyong: {
            },
            //费用信息
            ListColsFeiyong: [
                [
                    {
                        label: '商品合计',
                        prop: 'copeMoney',
                        formatter: e => '￥' + e.copeMoney
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '优惠金额',
                        prop: 'favorableMoney',
                        formatter: e => '￥' + e.favorableMoney
                    },
                    {
                        label: '应付款金额',
                        prop: 'actuallyPaidMoney',
                        formatter: e => '￥' + e.actuallyPaidMoney
                    },
                    {
                        label: '退款金额',
                        prop: 'refundMoney',
                        formatter: e => '￥' + e.refundMoney
                    },
                    {
                        label: '退款时间',
                        prop: 'refundTime',
                    },
                ]
            ],
            //商品核销信息数据
            ListDataHexiao: {
                cancelCode: '123',
                sizeID: '123',
                etime: '10:00',
            },
            //商品核销信息
            ListColsHexiao: [
                [
                    {
                        label: '核销码',
                        prop: 'openCode'
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '尺寸编号',
                        prop: 'doorNo'
                    },
                    {
                        label: '占柜到期时间',
                        prop: 'timeOut'
                    },
                    {
                        label: '',
                        prop: ''
                    },
                    {
                        label: '',
                        prop: ''
                    },
                ]
            ],
            //订单分成利润
            ListDataFencheng: {
            },
            //订单分成利润信息
            ListColsFencheng: [
                [
                    {
                        label: '商品合计',
                        prop: 'money',
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                        formatter: e => e && e.money ? '￥' + e.money : '￥' + '0'
                    },
                    {
                        label: '分成金额',
                        prop: 'money',
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                        formatter: e => e && e.money ? '￥' + e.money : '￥' + '0'
                    },
                    {
                        label: '运营商分成',
                        prop: 'operatorBonusInfo',
                        formatter: e => e && e.operatorBonusInfo && '￥' + JSON.parse(e.operatorBonusInfo).profit || '￥0'

                    },
                    {
                        label: '代理商分成',
                        prop: 'regionalBonusInfo.profit',
                        formatter: e => e && e.regionalBonusInfo && '￥' + JSON.parse(e.regionalBonusInfo).profit || '￥0'
                    },
                    {
                        label: '商家分成',
                        prop: 'merchantBonusInfo.profit',
                        formatter: e => e && e.merchantBonusInfo && '￥' + JSON.parse(e.merchantBonusInfo).profit || '￥0'
                    },
                ]
            ],
            //收货数据
            ListDataShouhuo: {
            },
            //商品收货信息
            ListColsShouhuo: [
                [
                    {
                        label: '收货人',
                        prop: 'nickName'
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '售后地址',
                        prop: 'address'
                    },
                    {
                        label: '配送时间',
                        prop: 'timeOut'
                    },
                    {
                        label: '留言',
                        prop: 'remake'
                    },
                ]
            ],
            //订单售后数据
            ListDataShouhou: {
            },
            //订单售后信息
            ListColsShouhou: [
                [{
                    label: '反馈内容',
                    prop: 'remark'
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '售后图片',
                    prop: 'picture',
                    type: 'img',
                    imglook: true
                },
                {
                    label: '申请时间',
                    prop: 'createdTime'
                },
                {
                    label: '处理状态',
                    prop: 'state',
                    formatter: e => e.state == 0 ? '未退款' : e.state == 1 ? '已退款' : e.state == 2 ? '退款失败' : ''
                },
                {
                    label: '处理结果',
                    prop: 'refundMoney',
                    type: 'button',
                    // isShow:e=>e.state==0?true:false,
                    formatter: e => this.ListDataShouhou['state'] == 0 ? `退款${e.refundMoney}元` : '-',
                    showText: true,
                    btnisShow: e => this.ListDataShouhou['state'] == 0 ? true : false,
                    btnList: [
                        {
                            label: '处理',
                            type: 'primary',
                            handle: e => this.showFrom(),
                        },
                    ]
                },
                {
                    label: '处理时间',
                    prop: 'updatedTime'
                },]
            ],
            //日志数据
            tableDataLog: [
                {
                    content: '123',
                    operator: '123',
                    cTime: '123',
                },
            ],
            //日志信息
            tableColsLog: [
                {
                    label: '操作内容',
                    prop: 'content',
                },
                {
                    label: '操作人',
                    prop: 'operator'
                },
                {
                    label: '创建时间',
                    prop: 'createdTime'
                },
            ],
            // 商品数据
            tableData: [
            ],
            // 商品信息
            tableCols: [
                {
                    label: '商品图片',
                    prop: 'img',
                    type: 'image'
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                // {
                //     label: '商品分类',
                //     prop: 'goodsClassfy'
                // },
                {
                    label: '商品名称',
                    prop: 'goodsName'
                },

                {
                    label: '单价',
                    prop: 'price'
                },
                {
                    label: '数量',
                    prop: 'num'
                },
                {
                    label: '小计',
                    prop: 'subtotal'
                }
            ],
            //合计栏
            tableBottom: { title: '合计', content: '', textAlign: 'right', color: '#f00', titleColor: '#000' },
            formData: {
                orderPrice: "",
                returnPrice: ''
            },
            formCols: [
                { type: 'readonly', label: "订单支付金额", width: 350, prop: "orderPrice" },
                { type: 'input', label: "退款金额", width: 350, prop: "returnPrice" },
            ],
            formRules: {
                orderPrice: [
                    { required: false, message: '', trigger: 'blur' },
                ],
                returnPrice: [
                    { required: true, message: '请输入退款金额', trigger: 'blur' },
                ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },
            ],

        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let res = await this.api.shopaftersaleDetail({
                id: this.$route.query.id
            })
            if (res) {
                this.ListData = res.data.order
                this.ListDataFeiyong = res.data.order
                this.ListDataFencheng = res.data.bonus
                this.ListDataShouhou = res.data.afterSale[0]
                this.ListDataShouhuo = res.data.order
                this.ListDataHexiao = res.data.order
                this.tableDataLog = res.data.orderLog
                this.tableData = JSON.parse(res.data.order.productInfor)
                let sum = 0
                this.tableData.map(item => {
                    sum += item.subtotal
                })
                this.tableBottom.content = '￥' + sum
                this.videoUrl = res.data.videoUrl
                this.ListDataShouhou.picture = this.ListDataShouhou && this.ListDataShouhou.picture.split(',')

                // console.log(JSON.parse(res.data.order.productInfor));
            }
        },
        showFrom() {
            this.$prompt(`请输入退款金额(支付金额:${this.ListData.actuallyPaidMoney})`, '提示', {
                confirmButtonText: '确定退款',
                cancelButtonText: '拒绝退款',
                cancelButtonClass: 'bg_danger',
                distinguishCancelAndClose: true,
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                // inputErrorMessage: '邮箱格式不正确'
            }).then(async ({ value }) => {
                let res = await this.api.shoporderRefund({
                    id: this.ListDataShouhou.id,
                    state: 1,
                    refundMoney: value,
                })
                if (res) {
                    this.$message({
                        type: 'success',
                        message: '退款成功'
                    });
                    this.init()

                }

            }).catch(async action => {
                if (action == 'cancel') {
                    let res = await this.api.shoporderRefund({
                        id: this.ListDataShouhou.id,
                        state: 2,
                    })
                    if (res) {
                        this.$message({
                            type: 'info',
                            message: action === 'cancel'
                                ? '处理成功'
                                : ''
                        })
                        this.init()
                    }
                }
            });
        }

    }
};
</script>
<style  lang='scss'>
.bg_danger {
  background: red;
  color: #fff;
}
</style>